---
title: Menü Öğesi
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Bir menü veya navigasyon listesinde kullanılmak üzere tasarlanmış çok yönlü bir menü öğesi.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Özellikler    | Tür           | Açıklama                                                                                                                      |
| ------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| Sol Simge     | IconComponent | Metin öncesinde görüntülenen isteğe bağlı bir sol simge                                                                       |
| vurgula       | metin         | Menü öğesinin vurgu rengini belirtir. Options include: `default`, `danger`, and `placeholder` |
| metin         | metin         | Menü öğesinin metin içeriği                                                                                                   |
| simgeDüğmeler | dizi          | Menü öğesiyle ilgili ek simge düğmelerini temsil eden nesnelerin dizisi                                                       |
| isTooltipOpen | boolean       | Menü öğesiyle ilgili ipucu açıklamasının görünürlüğünü kontrol eder                                                           |
| testId        | metin         | Test amaçları için data-testid özelliği                                                                                       |
| tıklandığında | fonksiyon     | Menü öğesi tıklandığında tetiklenen geri çağırma işlevi                                                                       |
| sınıfAdı      | metin         | Ek stil için isteğe bağlı ad                                                                                                  |

</Tab>
</Tabs>

## Varyantlar

Menü öğesi bileşeninin farklı varyantları şunları içerir:

### Komut

Klavye kısayollarını belirtmek için bir menü içinde komut tarzı bir menü öğesi.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Özellikler    | Tür           | Açıklama                                                                      |
| ------------- | ------------- | ----------------------------------------------------------------------------- |
| Sol Simge     | IconComponent | Metin öncesinde görüntülenen isteğe bağlı bir sol simge                       |
| metin         | metin         | Menü öğesinin metin içeriği                                                   |
| firstHotKey   | metin         | Komutla ilişkilendirilmiş ilk klavye kısayolu                                 |
| secondHotKey  | metin         | Komutla ilişkilendirilmiş ikinci klavye kısayolu                              |
| isSelected    | boolean       | Menü öğesinin seçilip seçilmediğini veya vurgulanıp vurgulanmadığını belirtir |
| tıklandığında | function      | Menü öğesi tıklandığında tetiklenen geri çağırma işlevi                       |
| sınıfAdı      | metin         | Ek stil için isteğe bağlı ad                                                  |

</Tab>
</Tabs>

### Draggable

A draggable menu item component designed to be used in a menu or list where items can be dragged, and additional actions can be performed through icon buttons.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Özellikler     | Tür           | Açıklama                                                                                 |
| -------------- | ------------- | ---------------------------------------------------------------------------------------- |
| Sol Simge      | IconComponent | Metin öncesinde görüntülenen isteğe bağlı bir sol simge                                  |
| vurgula        | metin         | Menü öğesinin vurgu rengi. `default`, `placeholder` ve `danger` olabilir |
| simgeDüğmeler  | dizi          | Menü öğesiyle ilgili ek simge düğmelerini temsil eden nesnelerin dizisi                  |
| isTooltipOpen  | boolean       | Menü öğesiyle ilgili ipucu açıklamasının görünürlüğünü kontrol eder                      |
| tıklandığında  | fonksiyon     | Bağlantıya tıklandığında tetiklenecek callback işlevi                                    |
| metin          | metin         | Menü öğesinin metin içeriği                                                              |
| isDragDisabled | boolean       | Sürükleme işleminin devre dışı olup olmadığını belirtir                                  |
| sınıfAdı       | metin         | Ek stil için isteğe bağlı ad                                                             |

</Tab>
</Tabs>

### Çoklu Seçim

Bir onay kutusu ile birlikte çoklu seçim işlevselliği sağlanır.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Özellikler     | Tür           | Açıklama                                                                    |
| -------------- | ------------- | --------------------------------------------------------------------------- |
| Sol Simge      | IconComponent | Metin öncesinde görüntülenen isteğe bağlı bir sol simge                     |
| metin          | metin         | Menü öğesinin metin içeriği                                                 |
| seçili         | boolean       | Menü öğesinin seçili (işaretli) olup olmadığını gösterir |
| onSelectChange | function      | Onay kutusu durumu değiştiğinde tetiklenen geri çağırma işlevi              |
| sınıfAdı       | metin         | Ek stil için isteğe bağlı ad                                                |

</Tab>
</Tabs>

### Çoklu Seçim Avatar

Bir avatar, bir seçim için onay kutusu ve metin içeriği ile bir çoklu seçim menü öğesi.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Özellikler     | Tür         | Açıklama                                                                    |
| -------------- | ----------- | --------------------------------------------------------------------------- |
| avatar         | `ReactNode` | Menü öğesinin sol tarafında gösterilecek avatar veya simge                  |
| metin          | metin       | Menü öğesinin metin içeriği                                                 |
| seçili         | boolean     | Menü öğesinin seçili (işaretli) olup olmadığını gösterir |
| onSelectChange | fonksiyon   | Onay kutusu durumu değiştiğinde tetiklenen geri çağırma işlevi              |
| sınıfAdı       | metin       | Ek stil için isteğe bağlı ad                                                |

</Tab>
</Tabs>

### Gezin

İsteğe bağlı bir sol simge, metin içeriği ve sağda bir ok simgesi sunan bir menü öğesi.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Özellikler    | Tür           | Açıklama                                                |
| ------------- | ------------- | ------------------------------------------------------- |
| Sol Simge     | IconComponent | Metin öncesinde görüntülenen isteğe bağlı bir sol simge |
| metin         | metin         | Menü öğesinin metin içeriği                             |
| tıklandığında | fonksiyon     | Menü öğesi tıklandığında tetiklenen geri çağırma işlevi |
| sınıfAdı      | metin         | Ek stil için isteğe bağlı ad                            |

</Tab>
</Tabs>

### Seç

Seçilebilir bir menü öğesi, isteğe bağlı sol içerik (simgeler ve metin) ve seçili durum için bir gösterge (kontrol simgesi) içerir.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Özellikler    | Tür           | Açıklama                                                                    |
| ------------- | ------------- | --------------------------------------------------------------------------- |
| Sol Simge     | IconComponent | Metin öncesinde görüntülenen isteğe bağlı bir sol simge                     |
| metin         | metin         | Menü öğesinin metin içeriği                                                 |
| seçili        | boolean       | Menü öğesinin seçili (işaretli) olup olmadığını gösterir |
| devre dışı    | boolean       | Menü öğesinin devre dışı olup olmadığını gösterir                           |
| hovered       | boolean       | Menü öğesinin şu anda üzerinden geçilip geçilmediğini gösterir              |
| tıklandığında | function      | Menü öğesi tıklandığında tetiklenen geri çağırma işlevi                     |
| sınıfAdı      | metin         | Ek stil için isteğe bağlı ad                                                |

</Tab>
</Tabs>

### Seç Avatar

Bir avatar ve seçilmiş durum için gösterge (kontrol simgesi) ile beraber isteğe bağlı sol içerik (avatar ve metin) içeren bir seçilebilir menü öğesi.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Özellikler    | Tür         | Açıklama                                                                    |
| ------------- | ----------- | --------------------------------------------------------------------------- |
| avatar        | `ReactNode` | Menü öğesinin sol tarafında gösterilecek avatar veya simge                  |
| metin         | metin       | Menü öğesinin metin içeriği                                                 |
| seçili        | boolean     | Menü öğesinin seçili (işaretli) olup olmadığını gösterir |
| devre dışı    | boolean     | Menü öğesinin devre dışı olup olmadığını gösterir                           |
| hovered       | boolean     | Menü öğesinin şu anda üzerinden geçilip geçilmediğini gösterir              |
| testId        | metin       | Test amaçları için data-testid özelliği                                     |
| tıklandığında | fonksiyon   | Menü öğesi tıklandığında tetiklenen geri çağırma işlevi                     |
| sınıfAdı      | metin       | Ek stil için isteğe bağlı ad                                                |

</Tab>
</Tabs>

### Renk Seçimi

Kullanıcıların bir menüden renk seçmelerini istediğiniz senaryolar için renk örneğiyle birlikte seçilebilir bir menü öğesi.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Özellikler    | Tür      | Açıklama                                                                                                                                                                                      |
| ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| renk          | metin    | Menü öğesinde örnek olarak gösterilecek tema rengi. Seçenekler: `yeşil`, `turkuaz`, `gökyüzü`, `mavi`, `mor`, `pembe`, `kırmızı`, `turuncu`, `sarı`, ve `gri` |
| seçili        | boolean  | Menü öğesinin seçili (işaretli) olup olmadığını gösterir                                                                                                                   |
| devre dışı    | boolean  | Menü öğesinin devre dışı olup olmadığını gösterir                                                                                                                                             |
| hovered       | boolean  | Menü öğesinin şu anda üzerinden geçilip geçilmediğini gösterir                                                                                                                                |
| variant       | metin    | Renk örneğinin varyantı. Ya `varsayılan` ya da `pipeline` olabilir                                                                                                            |
| tıklandığında | function | Menü öğesi tıklandığında tetiklenen geri çağırma işlevi                                                                                                                                       |
| sınıfAdı      | metin    | Ek stil için isteğe bağlı ad                                                                                                                                                                  |

</Tab>
</Tabs>

### Toggle

A menu item with an associated toggle switch to allow users to enable or disable a specific feature

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Özellikler     | Tür           | Açıklama                                                                   |
| -------------- | ------------- | -------------------------------------------------------------------------- |
| Sol Simge      | IconComponent | Metin öncesinde görüntülenen isteğe bağlı bir sol simge                    |
| metin          | metin         | Menü öğesinin metin içeriği                                                |
| toggled        | boolean       | Açma/kapatma anahtarının açık veya kapalı konumda olup olmadığını gösterir |
| onToggleChange | function      | Açma/kapatma anahtarı durumu değiştiğinde tetiklenen geri çağırma işlevi   |
| toggleSize     | metin         | Anahtar değiştirme düğmesinin boyutu. It can be either \  |
| sınıfAdı       | metin         | Ek stil için isteğe bağlı ad                                               |

</Tab>
</Tabs>
